<template>
  <div class="btn">
    <!-- 返回上一级 -->
    <!-- 头部:订单管理 -->
    <el-row>
      <el-col :span="24">
        <h4>订单管理</h4>
        <el-button @click="fun()">返回上一页</el-button>
      </el-col>
    </el-row>
    <!-- 查询重置 -->
    <div class="search">
      <el-form ref="form" :model="form" label-width="50px" class="top">
        <el-form-item label="商品页码" :label-width="formLabelWidth">
          <el-input v-model="form.proname"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="form.proid"></el-input>
        </el-form-item>
        <div class="block">
          <span class="demonstration">默认</span>
          <el-date-picker
            v-model="form.desc"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </div>
        <el-form-item label="订单条数" :label-width="formLabelWidth">
          <el-input v-model="form.oid"></el-input>
        </el-form-item>

        <el-form-item label="支付方式" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option label="支付宝" value="支付宝"></el-option>
            <el-option label="微信" value="微信"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 搜索按钮 -->
      <el-form class="reset">
        <el-form-item class="query">
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import { blursearch } from "@/api/mzt/index";

export default {
  components: {
    NavBar,
  },
  data() {
    return {
      // 搜索框输入内容
      tableData: [],
      formLabelWidth: "100px",
      form: {
        proname: "",
        proid: "",
        oid: "",
        desc: "",
        region: "",
      },
    };
  },
  methods: {
    //查询
    onSubmit() {
      // console.log("submit!", this.form);
      //   console.log(this.$store.state.mzt.hhhh, 111);
      blursearch(
        this.form.proname / 1,
        this.form.proid,
        this.form.oid / 1
      ).then((ok) => {
        console.log(ok.data.records);
        // this.tableData = ok.data.records;
        this.$store.commit("SET_TABLEDATA", ok.data.records);
      });
    },
    // 重置
    onReset() {
      console.log("reset!", this.form);
      this.form = {};
    },
    fun() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped lang="scss">
.top {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    width: 320px;
  }
}
.reset {
  width: 560px;
  display: flex;
  justify-content: center;
  .query {
    padding: 0 10px 0 82px;
  }
}
.block {
  padding-left: 30px;
}
.el-button {
  margin-left: 10px;
}
.search {
  display: flex;
  justify-content: space-between;
}
.el-col-24 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0 20px 0;
  padding: 0 140px 0 8px;
  border-left: 5px rgb(80, 176, 227) solid;
  .el-button {
    height: 40px;
  }
}
</style>